<template>
<div class="envform">
  <div class="adde">
      <el-button style="align-items:left" type="text" @click="dialogVisible = true">新增</el-button>
    <el-input v-model="search" :suffix-icon="Search" class="search" placeholder="Env to search"/>
  </div>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="用户名" prop="UserName" />
    <el-table-column label="角色" prop="Role" />
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"><el-icon><operation /></el-icon></el-button>
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"><el-icon><edit /></el-icon></el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"><el-icon><delete /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" :before-close="handleClose" title="Tips" width="70%">
    <el-form :model="form" label-width="120px">
      <el-form-item label="UserName">
        <el-input v-model="form.UserName" />

      </el-form-item>
        <el-form-item label="PassWord">
          <el-input v-model="form.PassWord" />
      </el-form-item>

      <el-form-item label="Email">
          <el-input v-model="form.Email" />
          <span v-if="!form.Email" style="color:red">请填写正确的邮箱!</span>
      </el-form-item>

      <el-form-item label="Role">
        <el-select v-model="form.region" placeholder="please select your Role">
            <el-option label="管理员" value="0" />
            <el-option label="测试" value="1" />
            <el-option label="开发" value="1" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="OnSubmit">创建</el-button>
      </span>
    </template>
  </el-dialog>
</div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { validatePassword } from '@/api/rules'
import { DeleteUser } from '@/api/user'
const router = useRouter()
const handleClose = () => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const handleEdit = (number, User) => {
  console.log(number, User)
}
</script>

<script>
import { useUserStore } from '@/pinia/modules/user'
import { CreateUser, DeleteUser } from '@/api/user'
import { ElLoading, ElMessage } from 'element-plus'
const store = useUserStore()
const search = ref('')
export default {
  data () {
    return {
      "tableData": [
      ],
      "filterTableData": [],
      "form": {
        UserName: '',
        PassWord: '',
        Email: '',
        Role: '',
      },
      "dialogVisible": false,
    }
  },
  mounted () {
    store.GetUser().then(
      (response) => {
        this.tableData = response
      }
    ).catch((error) => {
      ElMessage({
        type: 'error',
        message: error,
        showClose: true,
      })
    })
  },
  watch () {
  },
  methods: {
    OnSubmit () {
      CreateUser(this.form).then((response) => {
        console.log(response.data)
        this.GetUserL()
      })
      this.dialogVisible = false

    },
    GetUserL () {
      store.GetUser().then(
        (response) => {
          this.tableData = response
        }
      ).catch((error) => {
        ElMessage({
          type: 'error',
          message: error,
          showClose: true,
        })
      })
    },
    handleDelete (number, User) {
      DeleteUser(User.ID)
      ElMessage({
        type: 'success',
        message: "删除用户成功"
      })
      this.GetUserL()
    }
  },
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.envform {
  padding: 0px 25px;;
}

.adde {
  padding-left: 20px;
}
.search {
  float: right;
  width: 200px;
  padding-bottom: 5px;
  padding-right: 8px;
}

</style>

<style>
.el-table__header {
  line-height:20px;
  background-color: beige;
  padding: 0;
}
</style>